<template>
  <div class="form-container">
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
        <el-form
          ref="ruleForm"
          :model="ruleForm"
          :rules="rules"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item
            :label="$t('accountManage.specialCodeAdds') /*特码赔率*/"
            prop="name"
          >
            <el-input v-model="ruleForm.odds"></el-input>
          </el-form-item>
          <el-form-item
            :label="$t('accountManage.specialCodeOnLine') /*特码上限*/"
            prop="name"
          >
            <el-input v-model="ruleForm.upperLimit"></el-input>
          </el-form-item>
          <el-form-item
            :label="$t('accountManage.specialCodeOffLine') /*特码下限*/"
            prop="name"
          >
            <el-input v-model="ruleForm.lowerLimit"></el-input>
          </el-form-item>
          <el-form-item
            :label="$t('accountManage.specialCodeExtraction') /*特码抽成*/"
            prop="name"
          >
            <el-input v-model="ruleForm.draw"></el-input>
          </el-form-item>
          <el-form-item
            :label="$t('accountManage.orderReissued') /*订单重打*/"
            prop="resource"
          >
            <el-radio-group v-model="ruleForm.resource">
              <el-radio :label="$t('accountManage.none') /*无*/"></el-radio>
              <el-radio :label="$t('accountManage.has') /*有*/"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            :label="$t('accountManage.redemption') /*兑奖日期*/"
            prop="name"
          >
            <el-date-picker
              v-model="ruleForm.date"
              type="date"
              :placeholder="$t('accountManage.redemption') /*兑奖日期*/"
            ></el-date-picker>
            <!-- <el-input v-model="ruleForm.draw"></el-input> -->
          </el-form-item>
          <el-form-item
            :label="$t('accountManage.receiptInfomation') /*小票打印信息*/"
            prop="desc"
          >
            <el-input v-model="ruleForm.desc" type="textarea"></el-input>
          </el-form-item>
          <el-form-item
            :label="$t('accountManage.orderNumber') /*禁购号码*/"
            prop="region"
          >
            <el-radio-group v-model="ruleForm.resource">
              <el-radio :label="$t('accountManage.shut') /*关闭*/"></el-radio>
              <el-radio :label="$t('accountManage.open') /*开启*/"></el-radio>
            </el-radio-group>
            <!-- <el-button type="primary" plain>添加</el-button> -->
          </el-form-item>

          <el-form-item label="" prop="region">
            <el-tag
              v-for="tag in dynamicTags"
              :key="tag"
              closable
              :disable-transitions="false"
              @close="handleClose(tag)"
            >
              {{ tag }}
            </el-tag>
            <el-input
              v-if="inputVisible"
              ref="saveTagInput"
              v-model="inputValue"
              class="input-new-tag"
              size="small"
              @keyup.enter.native="handleInputConfirm"
              @blur="handleInputConfirm"
            ></el-input>
            <el-button
              v-else
              class="button-new-tag"
              size="small"
              @click="showInput"
            >
              + New Tag
            </el-button>
          </el-form-item>
          <!-- <el-form-item label="即时配送" prop="delivery">
            <el-switch v-model="ruleForm.delivery"></el-switch>
          </el-form-item>
          <el-form-item label="活动性质" prop="type">
            <el-checkbox-group v-model="ruleForm.type">
              <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
              <el-checkbox label="地推活动" name="type"></el-checkbox>
              <el-checkbox label="线下主题活动" name="type"></el-checkbox>
              <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">
              立即创建
            </el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item> -->
        </el-form>
      </el-col>
      <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
        <el-form
          ref="ruleForm"
          :model="ruleForm"
          :rules="rules"
          label-width="120px"
          class="demo-ruleForm"
        >
          <el-form-item
            :label="$t('accountManage.isAdditionSubtraction') /*是否有加奖*/"
            prop="resource"
          >
            <el-radio-group v-model="ruleForm.resource">
              <el-radio :label="$t('accountManage.none') /*无*/"></el-radio>
              <el-radio :label="$t('accountManage.has') /*有*/"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            :label="$t('accountManage.bounsOdds') /*加奖赔率*/"
            prop="name"
          >
            <el-input v-model="ruleForm.odds"></el-input>
          </el-form-item>
          <el-form-item
            :label="$t('accountManage.bounsOddsOn') /*加奖上限*/"
            prop="name"
          >
            <el-input v-model="ruleForm.upperLimit"></el-input>
          </el-form-item>
          <el-form-item
            :label="$t('accountManage.bounsOddsOff') /*加奖下限*/"
            prop="name"
          >
            <el-input v-model="ruleForm.lowerLimit"></el-input>
          </el-form-item>
          <el-form-item
            :label="$t('accountManage.bounsOddsPercent') /*加奖抽成*/"
            prop="name"
          >
            <el-input v-model="ruleForm.draw"></el-input>
          </el-form-item>
          <el-form-item
            :label="$t('accountManage.isUnk1') /*是否有灰球*/"
            prop="resource"
          >
            <el-radio-group v-model="ruleForm.resource">
              <el-radio :label="$t('accountManage.none') /*无*/"></el-radio>
              <el-radio :label="$t('accountManage.has') /*有*/"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            :label="$t('accountManage.greyballOdds') /*灰球赔率*/"
            prop="name"
          >
            <el-input v-model="ruleForm.odds"></el-input>
          </el-form-item>
          <el-form-item
            :label="$t('accountManage.specialCodeAmountLimit') /*特码金额限制*/"
            prop="name"
          >
            <el-button type="primary" plain>
              {{ $t('accountManage.add') /*增加*/ }}
            </el-button>
            <!-- <el-input v-model="ruleForm.odds"></el-input> -->
          </el-form-item>
          <el-table
            v-loading="listLoading"
            :data="list"
            :element-loading-text="elementLoadingText"
            @selection-change="setSelectRows"
          >
            <!-- <el-table-column show-overflow-tooltip type="selection"></el-table-column> -->
            <el-table-column
              show-overflow-tooltip
              prop="account"
              :label="$t('accountManage.number') /*号码*/"
            ></el-table-column>
            <el-table-column
              show-overflow-tooltip
              prop="account"
              :label="$t('accountManage.limitMoney') /*限制金额*/"
            ></el-table-column>
            <el-table-column
              show-overflow-tooltip
              :label="$t('common.operate') /*操作*/"
              width="60"
            >
              <template #default="{ row }">
                <el-button type="text" @click="handleDelete(row)">
                  {{ $t('accountManage.delete') /*删除*/ }}
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import userData from '@/views/accountManagement/userManagement/data.json'
  export default {
    name: 'Form',
    data() {
      return {
        list: null,
        listLoading: true,
        selectRows: '',
        elementLoadingText: '正在加载...',
        dynamicTags: ['标签一', '标签二', '标签三'],
        inputVisible: false,
        inputValue: '',
        ruleForm: {
          name: '',
          region: '',
          delivery: false,
          type: [],
          resource: '',
          desc: '',
        },
        rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            {
              min: 3,
              max: 5,
              message: '长度在 3 到 5 个字符',
              trigger: 'blur',
            },
          ],
          region: [
            { required: true, message: '请选择活动区域', trigger: 'change' },
          ],
          type: [
            {
              type: 'array',
              required: true,
              message: '请至少选择一个活动性质',
              trigger: 'change',
            },
          ],
          resource: [
            { required: true, message: '请选择活动资源', trigger: 'change' },
          ],
          desc: [
            { required: true, message: '请填写活动形式', trigger: 'blur' },
          ],
        },
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      async fetchData() {
        this.listLoading = true
        const { data, totalCount } = userData || (await getList(this.queryForm))
        console.log(data, totalCount, '获取数据')
        this.list = data
        this.total = totalCount
        setTimeout(() => {
          this.listLoading = false
        }, 300)
      },
      handleDelete(row) {
        if (row.id) {
          this.$baseConfirm('你确定要删除当前项吗', null, async () => {
            const { msg } = await doDelete({ ids: row.id })
            this.$baseMessage(msg, 'success')
            this.fetchData()
          })
        } else {
          if (this.selectRows.length > 0) {
            const ids = this.selectRows.map((item) => item.id).join()
            this.$baseConfirm('你确定要删除选中项吗', null, async () => {
              const { msg } = await doDelete({ ids })
              this.$baseMessage(msg, 'success')
              this.fetchData()
            })
          } else {
            this.$baseMessage('未选中任何行', 'error')
            return false
          }
        }
      },
      setSelectRows(val) {
        this.selectRows = val
      },
      handleClose(tag) {
        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)
      },

      showInput() {
        this.inputVisible = true
        this.$nextTick((_) => {
          this.$refs.saveTagInput.$refs.input.focus()
        })
      },

      handleInputConfirm() {
        let inputValue = this.inputValue
        if (inputValue) {
          this.dynamicTags.push(inputValue)
        }
        this.inputVisible = false
        this.inputValue = ''
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!')
          } else {
            return false
          }
        })
      },
      resetForm(formName) {
        this.$refs[formName].resetFields()
      },
    },
  }
</script>
